<template>
    <div id='container'></div>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import { Chart } from '@antv/g2'

let chart

onMounted(() => {
    chart = new Chart({
        container,
        autoFit: true,
    });
    chart
        .title('弹性条形图')
        .interval()
        .data({
            type: 'fetch',
            value: '/os/bmw-prod/90873879-09d7-4842-a493-03fb560267bc.csv'
        })
        .encode('x', 'country')
        .encode('y', 'value')
        .encode('color', 'country')
        .transform({
            type: 'flexX',
            field: 'gdp'
        })
        .tooltip(['value', 'gdp'])

    chart.render();
});

// 销毁
onUnmounted(() => {
    chart.destroy();
    chart = null;
});
</script>

<style lang='less' scoped>
#container {
    width: 800px;
    height: 400px;
}
</style>